<template>
  <div class="order-refund-detail-info">
    <div class="order-refund-detail-info-content">
      <div class="order-refund-detail-info-header">退款信息</div>
      <order-refund-item :item="refund"/>
    </div>
    <div class="order-refund-detail-fields">
      <van-field class="order-refund-detail-field" label="售后方式" :value="kind" :border="false" colon center readonly/>
      <van-field class="order-refund-detail-field" label="退款原因" :value="refund.reason" :border="false" colon center readonly/>
      <van-field class="order-refund-detail-field" label="退款金额" :value="refund.amount" :border="false" colon center readonly/>
      <van-field class="order-refund-detail-field" label="售后编号" :value="refund.id" :border="false" colon center readonly/>
      <van-field class="order-refund-detail-field" label="申请时间" :value="refund.appliedTime" :border="false" colon center readonly/>
    </div>
  </div>
</template>

<script>
import { order } from "@mall/api-services"
import { Card, Field } from "vant"
import OrderDisputeListItem from "@/components/order/OrderDisputeListItem"
import OrderRefundItem from "@/components/order/OrderRefundItem"

const { OrderDisputeKind } = order

export default {
  name: "OrderRefundDetailInfo",
  components: {
    OrderRefundItem,
    OrderDisputeListItem,
    [Card.name]: Card,
    [Field.name]: Field,
  },
  props: {
    refund: order.OrderRefund,
  },
  computed: {
    kind() {
      const { refund } = this
      if (refund.kind === OrderDisputeKind.OnlyRefund) {
        return "仅退款"
      } else if (refund.kind === OrderDisputeKind.ReturnRefund) {
        return "退货退款"
      }
      return "未知"
    },
  },
}
</script>

<style lang="scss" scoped>
.order-refund-detail-info {
  .order-refund-detail-info-content {
    background: #fff;

    .order-refund-detail-info-header {
      padding: 9px;
    }

    .order-refund-detail-info-card {
      margin-top: 0;
    }

    .order-refund-detail-info-item-l2 {

    }
  }

  .order-refund-detail-fields {
    background: #fff;

    .order-refund-detail-field {
      line-height: 14px;
      padding: 9px 9px 0 9px;

      &:last-child {
        padding-bottom: 9px;
      }
    }
  }
}
</style>
